<template>
    <view class="debt-receivable-container">
        <header-bar :config="config" />
        <custom-select @hanleSure="downRefresh" />
        <date-tab-bar @getNewData="downRefresh" background="#fff" />
        <custom-card :debt="debt" />
        <view class="title">往来明细（{{ detailTotal }}）</view>
        <view class="main" :class="{ 'main-show-time': activeTabIndex == 4 }">
            <mescroll-uni
                ref="mescrollRef"
                @init="mescrollInit"
                @down="downRefresh"
                @up="getNewData"
                :up="upOption"
                :fixed="false">
                <detail-list :sortList="sortList" @changeSort="getCtcOverList" />
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
import customSelect from "./childCpns/custom-select.vue"
import detailList from "./childCpns/detail-list.vue"
import customCard from "../components/custom-card.vue"
import dateTabBar from "../components/date-tab-bar.vue"

import { getTradeOrderBy, getCtcOverList, getCustomerStatistics } from "@/service/api/erp.js"

import { mapState, mapActions, mapMutations } from "vuex"
import { CHANGE_CUSTOM_SELECTED } from "@/store/mutation-type.js"

export default {
    components: {
        customSelect,
        dateTabBar,
        customCard,
        detailList,
    },
    data() {
        return {
            config: {
                title: "应收账款",
                centerSlot: true,
                rightSlot: false,
            },
            sortList: [],
            pageNumber: 1,
            pageSize: 10,
            debt: {
                WjsTotal: 0,
                TotalMoney: 0,
                HjTotal: 0,
                BdJsTotal: 0,
            },
        }
    },
    computed: {
        ...mapState("tabBar", ["activeTabIndex"]),
        ...mapState("report", ["startDate", "endDate", "detailTotal", "selectedCustoms"]),
    },
    created() {
        this.resetCustomSelected()
        this.getCustomerStatistics()
    },
    methods: {
        ...mapActions("report", ["fetchArApDetailList"]),
        ...mapMutations("report", [CHANGE_CUSTOM_SELECTED]),
        resetCustomSelected() {
            this[CHANGE_CUSTOM_SELECTED]([])
        },
        async getCustomerStatistics() {
            const res = await getCustomerStatistics({
                startDate: this.startDate,
                endDate: this.endDate,
                bCodeArr: this.selectedCustoms.map((item) => item.UserCode), // 客户
            })
            if (res.State == 1) {
                const { WjsTotal, TotalMoney, HjTotal, BdJsTotal } = res.Data
                this.debt.WjsTotal = WjsTotal
                this.debt.TotalMoney = TotalMoney
                this.debt.HjTotal = HjTotal
                this.debt.BdJsTotal = BdJsTotal
            }
        },
        async getTradeOrderBy() {
            const res = await getTradeOrderBy()
            if (res.State == 1) {
                this.sortList = res.Data
            }
        },
        // 上拉加载
        getNewData(page) {
            this.pageNumber = page.num
            this.getArApDetailList()
        },
        async getArApDetailList() {
            this.fetchArApDetailList({
                pageNumber: this.pageNumber,
                pageSize: this.pageSize,
                startDate: this.startDate,
                endDate: this.endDate,
                bCodeArr: this.selectedCustoms.map((item) => item.UserCode),
            }).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                } else {
                    this.mescroll.endErr()
                }
            })
        },
        // 下拉刷新
        downRefresh() {
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
            this.getCustomerStatistics()
        },
    },
}
</script>

<style lang="scss">
.debt-receivable-container {
    height: 100vh;
    overflow: hidden;

    .title {
        margin-left: 32rpx;
        color: $color-gray-1;
        font-weight: 700;
    }

    .main {
        height: calc(100% - 822rpx);
        overflow: hidden;
    }

    .main-show-time {
        height: calc(100% - 882rpx);
    }

    .card-wrapper {
        margin: 24rpx 32rpx 28rpx;
    }
}
</style>
